<template>
  <div class="chat-container">
    <div class="chat-header">
      <h1>{{ title }}</h1>
      <button class="clear-button" @click="clearChat">清空对话</button>
    </div>
    
    <div class="messages-container" ref="messagesContainer">
      <div v-if="messages.length === 0" class="empty-state">
        <div class="empty-icon">💬</div>
        <p>{{ emptyStateMessage }}</p>
      </div>
      
      <template v-else>
        <ChatMessage
          v-for="(message, index) in messages"
          :key="index"
          :role="message.role"
          :content="message.content"
          :timestamp="message.timestamp"
        />
      </template>
      
      <div v-if="loading" class="loading-indicator">
        <div class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
    
    <div class="input-container">
      <textarea
        v-model="userInput"
        placeholder="输入您的问题..."
        @keydown.enter.prevent="handleEnterKey"
        :disabled="loading"
        ref="inputField"
      ></textarea>
      <button 
        class="send-button" 
        @click="sendMessage" 
        :disabled="!userInput.trim() || loading"
      >
        发送
      </button>
    </div>
    
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, onMounted } from 'vue'
import ChatMessage from './ChatMessage.vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  messages: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: null
  },
  emptyStateMessage: {
    type: String,
    default: '开始一个新的对话吧！'
  }
})

const emit = defineEmits(['send-message', 'clear-chat'])

const userInput = ref('')
const messagesContainer = ref(null)
const inputField = ref(null)

// 发送消息
const sendMessage = () => {
  if (userInput.value.trim() && !props.loading) {
    emit('send-message', userInput.value.trim())
    userInput.value = ''
  }
}

// 处理回车键
const handleEnterKey = (event) => {
  // 如果按下Shift+Enter，则插入换行符
  if (event.shiftKey) {
    return
  }
  
  // 否则发送消息
  sendMessage()
}

// 清空聊天
const clearChat = () => {
  emit('clear-chat')
}

// 自动滚动到底部
watch(() => props.messages.length, async () => {
  await nextTick()
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
})

// 监听加载状态变化，也滚动到底部
watch(() => props.loading, async (newVal) => {
  if (newVal) {
    await nextTick()
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  }
})

// 组件挂载时聚焦输入框
onMounted(() => {
  if (inputField.value) {
    inputField.value.focus()
  }
})
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 90vh; /* 占满整个视口高度 */
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.chat-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.clear-button {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.5rem;
}

.clear-button:hover {
  color: #ff3b30;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px); /* 精确计算可用高度 */
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  text-align: center;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.input-container {
  flex-shrink: 0;
  padding: 1rem 0;
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap; /* 允许内容换行 */
}

textarea {
  flex: 1 1 100%; /* 在小屏幕上占满一行 */
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  resize: none;
  height: 60px;
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
}

textarea:focus {
  outline: none;
  border-color: #007AFF;
}

.send-button {
  padding: 0 1.5rem;
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: bold;
  min-width: 60px;
  height: 40px;
  flex: 0 0 auto;
  margin-top: 0.5rem;
}

.send-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error-message {
  color: #ff3b30;
  text-align: center;
  margin-top: 0.5rem;
}

.loading-indicator {
  display: flex;
  justify-content: flex-start;
  margin: 1rem 0;
  padding-left: 60px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #999;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.5s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}

@media (max-width: 768px) {
  .chat-container {
    padding: 0.5rem;
  }
  
  .chat-header h1 {
    font-size: 1.2rem;
  }
}
</style>